<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title></title>
    <style type="text/css">
      body {
        height: 2000px;
      }
      #backToTop {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: red;
        position: fixed;
        bottom: 30px;
        right: 30px;
        display: none;
      }
      div.block {
        height: 200px;
        width: 100px;
      }
      .blue {
        background: blue;
      }
    </style>
  </head>
  <body>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>
    <div class="block"></div>
    <div class="block blue"></div>

    <div id="backToTop">回到顶部</div>

    <script type="text/javascript">
      var bToTopBtn = document.getElementById("backToTop");

      //回到顶部按钮，
      bToTopBtn.onclick = function () {
        var tag = setInterval(function () {
          console.log(pageYOffset);
          scrollBy(0, -60);
          if (pageYOffset <= 50) {
            clearInterval(tag);
            tag = setInterval(function () {
              console.log(pageYOffset);
              scrollBy(0, -6);
              if (pageYOffset <= 0) {
                clearInterval(tag);
                //alert("成功到达顶部");
              }
            }, 20);
          }
        }, 20);
      };

      window.onscroll = function () {
        if (pageYOffset >= 600) {
          bToTopBtn.style.display = "block";
        } else if (pageYOffset < 600) {
          bToTopBtn.style.display = "none";
        }
      };
    </script>
  </body>
</html>
